<template>
  <div class="top">
    <div class="title">叩丁狼电商运营平台1111111111</div>
    <div class="admin">admin</div>
  </div>

  <div class="home">
    <div class="left-menus">
      <el-menu
        active-text-color="#ffd04b"
        background-color="#545c64"
        class="el-menu-vertical-demo"
        default-active="2"
        text-color="#fff"
        unique-opened
        router
      >
        <el-menu-item route="/index">
          <template #title>
            <span>首页</span>
          </template>
        </el-menu-item>
        <el-sub-menu :index="menu.id + ''" v-for="menu in menuConfig">
          <template #title>
            <span>{{ menu.title }}</span>
          </template>
          <template v-for="submenu in menu.children">
            <el-menu-item
              :index="'/' + menu.name + '/' + submenu.name"
              v-if="submenu.hidden === 0"
              >{{ submenu.title }}</el-menu-item
            >
          </template>
        </el-sub-menu>
      </el-menu>
    </div>
    <div class="content"><router-view></router-view></div>
  </div>
</template>

<script lang="ts" setup>
import { reactive, toRefs, ref, computed } from "vue";
import { useStore } from "vuex";

const store = useStore();
let menuConfig = computed(() => {
  return store.getters.genNewMenus;
});
</script>
<style lang="less" scoped>
.top {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  display: flex;
  justify-content: space-between;
  padding: 0 20px;
  width: 100%;
  height: 70px;
  background-color: #409eff;
  .title {
    line-height: 70px;
    font-weight: 400;
    font-size: 24px;
    color: #fff;
  }
  .admin {
    font-size: 14px;
    line-height: 70px;
    color: #fff;
  }
}

.home {
  margin-top: 70px;
  display: flex;
  justify-content: right;
  height: 100vh;
  .left-menus {
    position: fixed;
    top: 70;
    left: 0;
    width: 290px;
    height: 100%;
    // background-color: red;
    .el-menu-vertical-demo {
      height: 100vh;
    }
  }
  .content {
    width: calc(100% - 290px);
  }
}
</style>
